import React, { Component } from "react";
import { NavBar, Icon, Tabs, Toast } from "antd-mobile";
import "./my.scss"
class my extends Component {
    state={
        mylist:[
            {id:1,image:"https://misc.jiuxian.com/m_user/images/usercenter/order.png",text:"全部订单"},
            {id:2,image:"https://misc.jiuxian.com/m_user/images/usercenter/cart.png  ",text:"待领取"},
            {id:3,image:"https://misc.jiuxian.com/m_user/images/usercenter/unreceived-icon.png ",text:"购物车"},
            {id:4,image:"https://misc.jiuxian.com/m_user/images/usercenter/exchange.png ",text:"去兑换"},
            {id:5,image:"https://misc.jiuxian.com/m_user/images/usercenter/coupon.png",text:"我的优惠卷"},
            {id:6,image:"https://misc.jiuxian.com/m_user/images/usercenter/coupon.png",text:"浏览历史"},
            {id:7,image:"https://misc.jiuxian.com/m_user/images/usercenter/wallet.png ",text:"我的钱包"},
            {id:8,image:"https://misc.jiuxian.com/m_user/images/usercenter/collect.png ",text:"我的收藏"},
            {id:9,image:"https://misc.jiuxian.com/m_user/images/usercenter/address.png ",text:"地址管理"},
            {id:10,image:"https://misc.jiuxian.com/m_user/images/usercenter/safe.png",text:"账户安全"}
        ],
        username:"",
        is:false,
        url:''
        // token:[]
    }
    handleSkip =(index) => {
        if(index == 1){
            this.props.history.push("/cart")
        }else if(index == 7){
            this.props.history.push("/Collections")
        }
    }
    componentDidMount(){
        let token_str = localStorage.getItem("token");
        let token = JSON.parse(token_str || "[]"); 
        if(token.length==0){
            // this.props.history.push("/Login") 
            return false
        }else{
            this.setState({
               username :token.name,
            })
            if(token.url){
                this.setState({url:token.url,is:true})
            }
        }



    }
    handlequit=()=>{
        if(this.state.username !== ''){

            let token_str = localStorage.getItem("token");
            let token = JSON.parse(token_str || "[]"); 
            localStorage.removeItem('token');
            this.setState({
                is:false,
                username:'',
                url:''
            })
        }else{
            this.props.history.push('/login')
        }
        // this.state.username="请登录"
    }

  render() {
    return (
      <div className="jiuxian-my">
          {/* 头部导航开始 */}
        <div className="my-nav">
          <NavBar
            className="my-navbar"
            mode="light"
            icon={<Icon type="left" key="1"/>}
            onLeftClick={() => console.log("onLeftClick")}
            rightContent={[<i className="iconfont icon-gengduo"></i>]}
          >
            个人中心
          </NavBar>
        </div>
          {/* 头部导航结束 */}
          {/* 中间个人logo图开始 */}
        <div className="my-logo">
            <div className="logotop">
                <div className="logotop-left">
                   <img src={this.state.is ? this.state.url : "https://misc.jiuxian.com/m_user/images/usercenter/userPhoto.png"} alt=""  onClick={() => { this.props.history.push('/mine') }}/>
                </div>
                <div className="logotop-right">
                    <div className="logotop-right-top">
                       <div className="top-username">
                          {this.state.username}
                       </div>

                       <div className="top-CLUB">
                           <div className="CLUB-text">立享CLUB会员</div>
                           <div className="CLUB-img"><img src="https://misc.jiuxian.com/m_user/images/usercenter/clubFinger.png" alt=""/> </div>
                       </div>
                    </div>
                    <div className="logotop-right-bottom">
                       <div className="bottom-text">
                           下载客户端  <i> </i> 美酒随时享
                       </div>
                    </div>
                </div>
            </div>

            <div className="logobottom">
                <div className="logobottom-left">
                    <div className="logobottom-left-dj">
                        LV1 酒虫
                    </div>
                    </div>
                    <div className="logobottom-right">
                        <div className="right-list">
                            <div className="list-item">
                                <div className="item-num">0</div>
                                <div className="item-text">待付款</div>
                            </div>
                            <div className="list-item">
                                <div className="item-num">0</div>
                                <div className="item-text">待发货</div>
                            </div>
                            <div className="list-item">
                                <div className="item-num">0</div>
                                <div className="item-text">待收货</div>
                            </div>
                            <div className="list-item">
                                <div className="item-num">0</div>
                                <div className="item-text">已完成</div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
          {/* 中间个人logo图结束 */}
          {/* 中间内容区开始 */}
           <div className="my-content">
             {
                 this.state.mylist.map((v,index)=>{
                     return <div key={v.text} className="content-item" onClick={this.handleSkip.bind(this,index)}>
                         <div className="item-img">
                             <img src={v.image} alt=""/>
                         </div>
                         <div className="item-text">
                             {v.text}
                         </div>
                     </div>
                 })
             }
           </div>
          {/* 中间内容区结束 */}
          {/* 底部按钮开始 */}
           <div className="my-button">
            <div className="button-quit" onClick={this.handlequit}>{this.state.username!==''?'退出登录':'立即登录'}</div>
           </div>
          {/* 底部按钮结束 */}
      </div>
        
    );
  }
}

export default my;
